{extend name="layout"}
{block name="body"}
<section class="wld-content">
    <div class="page_title">工作台</div>
    <div class="company_box">
        <div class="company_name">
            <span style="display: inline-block; vertical-align: middle;">{$company_name|default=''}</span>
            
            
            <div class="company_main">
            	{if $account_type eq 1}
                <span class="company_main_title">主账号</span>
                {else/}
                <span class="company_main_title">子账号</span>
                <span class="company_main_name">主账号：{$master_name|default=''}</span>
                {/if}
            </div>


        </div>
        {switch $status}
        {case 1}
        <div class="company_time"><i class="iconfont iconzhengchang" style="display: inline-block;padding-right: 8px; color:#79f1ff ;"></i>
            服务状态：正常</div>
        {/case}
        {default /}
        <div class="company_time"><i class="iconfont iconzhengchang1" style="display: inline-block;padding-right: 8px; color:#ff6d5a ;"></i>
            服务状态：<span style="color:#ff6d5a ;">终止</span></div>
        {/switch}
        <div class="company_progress"></div>
        <div class="company_num">
            <div class="serve_num">
                <div class="num_icon"><i class="iconfont iconqianbi"></i></div>
                <div>
                    <span>服务点数</span>
                    <span>{$point|default='0'}</span>
                </div>
            </div>
            <div class="warranty_num">
                <div class="num_icon"><i class="iconfont iconyuangonggoumaishebaoshenqingbiao"></i></div>
                <div>
                    <span>在职人数</span>
                    <span>{$in_bao|default='0'}</span>
                </div>
                
            </div>
<!--            {if $account_type eq 1}-->
<!--            <div class="stop_num">-->
<!--                <div class="num_icon"><i class="iconfont iconlizhirenyuan"></i></div>-->
<!--                <div>-->
<!--                    <span>服务详情</span>-->
<!--                    <a href="{:url('index/service/index')}">查看</a>-->
<!--                </div>-->
<!--                -->
<!--            </div>-->
<!--            <div class="stop_num">-->
<!--                <div class="num_icon"><i class="iconfont iconlizhirenyuan"></i></div>-->
<!--                <div>-->
<!--                    <span>服务套餐</span>-->
<!--                    <a href="{:url('index/goods/index')}">购买</a>-->
<!--                </div>-->
<!--                -->
<!--            </div>-->
<!--            {/if}-->
        </div>
        <img src="__ROOT__/static/index/img/index-bg.png">
    </div>
    <div>

    </div>
    {if $account_type eq 1}
    <div class="server-details">
        {if $service}
        <div class="server-info-title">服务详情
            <a href="{:url('index/goods/index')}">
                <i class="iconfont icontaocan" ></i>
                继续购买
            </a>
        </div>
        <div class="server-details-con">
            <div class="server-details-lists">
                {foreach $service as $k=>$v}
                {if $k < 3}
                <div class="server-details-list">
                    <div>
                        <i class="iconfont iconchakan" style="color:#79f1ff ; padding-right:8px"></i>
                        {$v['title']}
                    </div>
                    <div>
                        <span>{$v['surplus']}</span>
                        次
                    </div>
                </div>
                {/if}
                {/foreach}
            </div>
            <a href="{:url('index/service/index')}?type=1">详情></a>

        </div>
        {else /}
        <a href="{:url('index/goods/index')}">
            <img src="__ROOT__/static/index/img/index-banner.png" style="width: 100%; height: 100%;">
        </a>
        {/if}
       


    </div>
    {/if}
    <div class="people_box" style="padding-left: 0;padding-right: 0;">
       
        <div class="people_num">
            <div class="num_icon"><i class="iconfont iconshuiyanyanglao"></i></div>
            <div onclick="openCount(1,'养老在保人数')" style="cursor: pointer">
                <span>养老在保人数</span>
                <span>{$ylnum|default='0'}</span>
            </div>
        </div>
        <div class="people_num">
            <div class="num_icon"><i class="iconfont icongongshang"></i></div>
            <div onclick="openCount(2,'工伤在保人数')" style="cursor: pointer">
                <span>工伤在保人数</span>
                <span>{$gsnum|default='0'}</span>
            </div>
        </div>
        <div class="people_num">
            <div class="num_icon"><i class="iconfont iconyuangonglizhi"></i></div>
            <div onclick="openCount(3,'失业在保人数')" style="cursor: pointer">
                <span>失业在保人数</span>
                <span>{$synum|default='0'}</span>
            </div>
        </div>
        <div class="people_num">
            <div class="num_icon"><i class="iconfont iconchongwuyiliao"></i></div>
            <div onclick="openCount(4,'医疗在保人数')" style="cursor: pointer">
                <span>医疗在保人数</span>
                <span>{$yilnum|default='0'}</span>
            </div>
        </div>
        <div class="people_num">
            <div class="num_icon"><i class="iconfont icongongjijin"></i></div>
            <div onclick="openCount(5,'公积金在保人数')" style="cursor: pointer">
                <span>公积金在保人数</span>
                <span>{$gjjnum|default='0'}</span>
            </div>
        </div>
        <div class="people_num">
            <div class="num_icon"><i class="iconfont icondangan"></i></div>
            <div onclick="openCount(6,'档案托管人数')" style="cursor: pointer">
                <span>档案托管人数</span>
                <span>{$archives|default='0'}</span>
            </div>
        </div>
    </div>
    <div class="data_box">
        <div class="insurance_serve">
            <div class="serve_chart">
                <div class="data_box_title">社保服务</div>
                <div id="main2" style="height:258px"></div>
                <div class="serve_proportion peo">
                    <div><span>{$csocsecs_per|default='0'}</span>%</div>
                    <div>公司办理占比</div>
                    <span></span>

                </div>
                <div class="serve_proportion  com">
                    <div><span>{$psocsecs_per|default='0'}</span>%</div>
                    <div>个人办理占比</div>
                    <span></span>

                </div>
                <img src="__ROOT__/static/index/img/circle.png">



            </div>
            <ul class="serve_num">
                <li>
                    <span ><i class="iconfont icongongsimianxing" style="color: #7a7ff7;"></i></span>
                    <a href="{:url('index/socsecs/index')}?status=1">{$csocsecs_soon|default='0'}</a>
                    <div>公司办理中</div>
                </li>
                <li>
                    <span ><i class="iconfont iconyibanli" style="color: #c5c7fc;"></i></span>
                    <a href="{:url('index/socsecs/index')}?status=2">{$csocsecs_end|default='0'}</a>
                    <div>公司已办理</div>
                </li>
                <li>
                    <span ><i class="iconfont icongerenbanlizhong" style="color: #61cad7;"></i></span>
                    <a href="{:url('index/socsecs/index')}?type=2&status=1">{$psocsecs_soon|default='0'}</a>
                    <div>个人办理中</div>
                </li>
                <li>
                    <span ><i class="iconfont icongerenyibanli" style="color: #b0e4eb;"></i></span>
                    <a href="{:url('index/socsecs/index')}?type=2&status=2">{$psocsecs_end|default='0'}</a>
                    <div>个人已办理</div>
                </li>
            </ul>
        </div>
        <div class="second_info">
            <div class="information">
                <div class="info_title">增员信息</div>
                <div class="info_con">
                    <a href="{:url('index/increase/index')}?status=1">{$increase_soon|default='0'}</a>
                    <span>待审核</span>
                </div>
                <div class="info_con">
                    <a href="{:url('index/increase/index')}?status=3">{$increase_end|default='0'}</a>
                    <span>未通过</span>
                </div>
            </div>
            <div class="information">
                <div class="info_title">减员信息</div>
                <div class="info_con">
                    <a href="{:url('index/downsizing/index')}?status=1">{$downsizing_soon|default='0'}</a>
                    <span>待审核</span>
                </div>
                <div class="info_con">
                    <a href="{:url('index/downsizing/index')}?status=3">{$downsizing_end|default='0'}</a>
                    <span>未通过</span>
                </div>
            </div>
            <div class="information customer_people">
                <div class="info_title">客服-{$csr.nickname|default=''}</div>
                <div class="info_con" style="background: #8adfb1;   border-bottom-left-radius: 10px;">
                    <i class="iconfont icondianhua"></i>
                    <span>{$csr.phone|default='-'}</span>
                </div>

                <div class="info_con" style="background: #7a7ff7;border-bottom-right-radius: 10px;">
                    <i class="iconfont iconqq"></i>
                    <span>{$csr.qq|default='-'}</span>
                </div>
            </div>
            <div class="serve_point">
                <div class="data_box_title">
                    服务点数
                </div>
                <div style="position: relative;">
<!--                    <a class="iconfont iconB" href="{:url('index/payment/index')}"></a>-->
                    <div id="main" style="height:261px"></div>
                </div>

               
            </div>

        </div>
    </div>
    <input type="hidden" name="bill" value="{$insbill}">
    <input type="hidden" name="cadditional_bill" value="{$cadditional_bill}">
    <input type="hidden" name="reminder" value="{$reminder|default=0}">
</section>
<div id="statisticsBox" style="display: none">
	<div class="statistic-info">
		<table>
			<thead>
			<tr><th >姓名</th><th >身份证号</th></tr>
			</thead>
			<tbody class="statistic-body">
			</tbody>

		</table>
	</div>
</div>
{/block}
{block name="script"}
<script>
    $(document).ready(function(){
		if($("[name='bill']").val()>0){
            $.msg.confirm("您有待付款的社保账单","提示" ,"tips", function () {
            window.location.href="/index/insbill/index.html";
            },null,["查看","取消"]);
        }else if($("[name='cadditional_bill']").val()>0){
			$.msg.confirm("您有待付款的增值账单","提示" ,"tips", function () {
				window.location.href="/index/cadditionalbill/index.html";
			},null,["查看","取消"]);
		}else if($("[name='reminder']").val()>0){
			$.msg.confirm("您的服务点数不足，请及时充值！","提示" ,"tips", function () {
				window.location.href="/index/index/renewal_package.html";
			},null,["购买","取消"]);
		}

	})
	var openCount = function (type,title){
		$(".statistic-body").html("")
		$.ajax({
			type: "POST",
			url: '{:url("index/index/person_list")}',
			dataType: "json",
			data:{type:type},

			success: function (res) {
				if(res.code==1){
					var _html = "";
					if(res.data.length>0){
						$.each(res.data, function(i,val){
							_html+= `<tr><td>${val.name}</td><td>${val.id_number}</td></tr>`

						});
						$(".statistic-body").html(_html)

						layer.open({
							skin:"statistic-class",
							type: 1,
							title: title,
							closeBtn: 2,
							area: '450px',
							// skin: 'layui-layer-nobg', //没有背景色
							shadeClose: true,
							content: $('#statisticsBox')
						});
					}else{
						$.msg.tips("暂无数据！")
					}

				}else{
					$.msg.error(res.info, 1)
				}
			}
		})

	}
    var color=['#61cad7','#7a7ff7']
    
    require(['echarts'], function (echarts, chart) {
        chart = echarts.init(document.getElementById('main'));

        chart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c}点'
            },
            color:color,
            legend: {
                orient: 'horizontal',
                right: 72,
                top:20,
                data: ['已使用', '已退回'],
                
                textStyle:{
                    color:'#9c9cae',
                    fontSize :12

                }
            },
            xAxis: {
                type: 'category',
                splitLine: {
                show: true,
                lineStyle:{
                    color: '#e5e5ed',
                    width: 1,
                    type: 'solid'
                }
                },
               
                axisLine:{
                    lineStyle:{
                        color:'#9c9cae',
                    },
                    
                },
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月',"八月","九月","十月","十一月","十二月"]
            },
            yAxis: {
                
                type: 'value',
                splitLine: {
                    show: false,

                },
               
                axisLine:{
                    lineStyle:{
                        color:'#9c9cae',
                       
                    },
                    
                },
              

            },
            grid:{
                right:32
            },
            series: [{
                name:"已使用",
                data: {$consumption|json_encode=true},
                type: 'line',
                // smooth: true
            },
            {
                name:"已退回",
                data: {$refund|json_encode=true},
                type: 'line',
                // smooth: true
            }
            ]
        });
        chart2 = echarts.init(document.getElementById('main2'));

        chart2.setOption({
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            color:color,
            grid:{
                top:100
            },
            legend: {
                orient: 'horizontal',
                right: 10,
                top:0,
                data: ['公司办理占比', '个人办理占比'],
                icon:'circle',
                textStyle:{
                    color:'#9c9cae',
                    fontSize :12

                }
            },
            series: [
                {
                    name: '社保服务',
                    type: 'pie',
                    radius: ['52%', '70%'],
                    avoidLabelOverlap: false,
                    legendHoverLink :false,
                    hoverAnimation:false,
                    label: {

                        show:false

                    },
                    itemStyle: { // 此配置
                        normal: {
                            borderWidth: 4,
                            borderColor: '#ffffff',
                        },
                        // emphasis: {
                        //     borderWidth: 0,
                        //     shadowBlur: 10,
                        //     shadowOffsetX: 0,
                        //     shadowColor: 'rgba(0, 0, 0, 0.5)'
                        // }
                    },


                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: {$csocsecs}, name: '公司办理占比'},
                        {value: {$psocsecs}, name: '个人办理占比'},

                    ]
                },

            ]
        });
    });
</script>
{/block}
{block name="style"}
<style>
	.layui-layer-msg {
		min-width: 140px !important;
	}
	body .statistic-class  .layui-layer-title {
		background: #61CAD7;
		font-size: 18px;
		font-weight: bold;
		color: #FFFFFF;
		border-radius: 10px 10px 0 0;
		padding: 0px;
		padding-left: 0px;
		text-align: center;
		line-height:60px;
	}
	body .statistic-class  .layui-layer-ico {
		background-size: auto;
	}
	body .statistic-class .layui-layer-setwin {
		display: block;
	}
	body .statistic-class .layui-layer-setwin .layui-layer-close2:hover {
		background-position: -149px -31px;
	}
</style>
{/block}